<template>
	<div class="zs-table-page-container">
		<bill-search :queryParams="queryParams" @queryList="searchFn"></bill-search>
		<div class="zs-card zs-table-page-content" :class="{ 'zs-table-first-row-special': currentPage == 1 }">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data" :cloumns="tableData.cloumns" @pageChange="pageChange" :isHaveIndex="false" :cell-class-name="getCellClassName" :headerCellClass="getCellClassName"> </hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
	import billSearch from './search/billSearch.vue';
	import { toThousands } from '@/utils/number-util';
	import detailPagesApi from '@/api/Manage/Business/detailPages';
	import { reactive, ref, onUnmounted } from 'vue';
	import { useRoute } from 'vue-router';
	import { useStore } from 'vuex';
	let store = useStore();
	let route = useRoute();
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const currentPage = ref(1);
	// 查询条件
	let queryParams = reactive({
		projectCode: route.query.projectCode,
		wtBrandName: decodeURIComponent(atob(route.query.wtBrandName)),
		sourceType: Number(route.query.sourceType),
		startMonth: '',
		endMonth: '',
		chargetypeGroupId: [],
		chargetypeIdList: [],
	});
	// 表格数据
	let tableData = reactive({
		loading: false,
		data: [],
		total: 0,
		cloumns: [
			{
				prop: 'index',
				label: '序号',
				width: '80',
				type: 'customMethods',
				methods: (a, empty, { $index }) => (currentPage.value == 1 ? ($index == 0 ? '合计' : $index + curPageSize.value * (currentPage.value - 1)) : $index + 1 + curPageSize.value * (currentPage.value - 1)),
			},
			{ prop: 'financePeriod', label: '权责记账月', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'financePeriod') },
			{ prop: 'debtTimeDiff', label: '欠款账龄', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'debtTimeDiff') },
			{ prop: 'chargeTypeGroupName', label: '费项类型', align: 'left', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'chargeTypeGroupName') },
			{ prop: 'chargeTypeName', label: '费项名称', align: 'left', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'chargeTypeName') },
			{ prop: 'invRecAmtL', label: '应收金额', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invRecAmtL'), align: 'right' },
			{ prop: 'invIncomeAmtL', label: '实收金额', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invIncomeAmtL'), align: 'right' },
			{ prop: 'debtAmt', label: '欠款金额', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'debtAmt'), align: 'right' },
			{ prop: 'contractsStatus', label: '合同状态', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'contractsStatus') },
			{ prop: 'conStartDate', label: '合同开始', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conStartDate') },
			{ prop: 'conEndDate', label: '合同结束', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conEndDate') },
			{ prop: 'contractsCode', label: '合同编号', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'contractsCode') },
			{ prop: 'customerName', label: '商户名称', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'customerName'), align: 'left' },
			{ prop: 'relationCustomer', label: '是否关联方', width: '90', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'relationCustomer') },
			{ prop: 'isLitigation', label: '是否诉讼', width: '90', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'isLitigation') },
			{ prop: 'isSingle', label: '是否单列', width: '90', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'isSingle') },
			{ prop: 'isExemption', label: '是否免责', width: '90', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'isExemption') },
			{ prop: 'invoiceCode', label: '账单编号', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invoiceCode') },
			{ prop: 'invoiceDate', label: '账单日期', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invoiceDate') },
			{ prop: 'invoiceLastDate', label: '最晚付款日', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invoiceLastDate') },
			{ prop: 'financePeriodDay', label: '权责口径日', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'financePeriodDay') },
			{ prop: 'assessmentDate', label: '考核口径日', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'assessmentDate') },
			{ prop: 'rentArea', label: '租赁面积', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'rentArea') },
			{ prop: 'conShopCode', label: '铺位号', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conShopCode') },
			{ prop: 'bizMode', label: '资产类型 ', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'bizMode') },
			{ prop: 'wtBrandName', label: '品牌名称', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'wtBrandName') },
			{ prop: 'floorManager', label: '楼层长', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'floorManager') },
		],
	});
	function rowMethods(row, index, empty, key) {
		if (row[key]) {
			if (['invRecAmtL', 'invIncomeAmtL', 'debtAmt'].includes(key)) {
				return row[key] > 0 ? toThousands(Number(row[key]).toFixed(2)) : 0;
			} else {
				return row[key] || empty;
			}
		} else {
			if (index == 0) return '';
			return empty;
		}
	}

	// 分页变化
	function pageChange(page) {
		currentPage.value = page.current;
		curPageSize.value = page.pageSize;
		queryList();
	}

	async function queryList() {
		tableData.loading = true;
		const res = await detailPagesApi.collectionRateBillListApi({ ...queryParams, pageNum: currentPage.value, pageSize: curPageSize.value });
		let resData = res.data;
		if (resData.errorCode == 200 && resData.data.billList != null && resData.data.billList.length > 0) {
			if (currentPage.value == 1) {
				let sumObj = {
					invRecAmtL: resData.data.invRecAmtLTotal,
					invIncomeAmtL: resData.data.invIncomeAmtLTotal,
					debtAmt: resData.data.debtAmtTotal,
				};
				resData.data.billList.unshift(sumObj);
			}
			tableData.data = resData.data.billList;
			tableData.total = resData.totalCount;
		} else {
			tableData.data = [];
			tableData.total = 0;
		}
		tableData.loading = false;
	}

	const getCellClassName = ({ columnIndex }) => {
		if ([7, 12, 16, 21, 25].includes(columnIndex)) {
			return 'zs-table-cell-border-right';
		}
	};

	const initCharge = () => {
		let collectionRateSearchParams = JSON.parse(localStorage.getItem('collectionRateSearchParams'));
		if (!collectionRateSearchParams) return;
		queryParams.chargetypeGroupId = collectionRateSearchParams.chargetypeParentIdList;
		queryParams.chargetypeIdList = collectionRateSearchParams.chargetypeIdList;
	};

	const searchFn = data => {
		queryParams = data;
		queryList();
	};

	onUnmounted(() => {
		localStorage.removeItem('collectionRateSearchParams');
	});

	window.addEventListener('beforeunload', () => {
		localStorage.removeItem('collectionRateSearchParams');
	});

	initCharge();
	queryList();
</script>
